import styled from 'styled-components';
import { Spin } from 'antd';
import { useUiStore } from '@/store/index.js';
import { memo } from 'react';

const CommonSpin = styled(Spin)`
  & > .ant-spin-dot-holder {
    color: var(${'--ant-primary-color'}) !important;
  }

  & > .ant-spin-text {
    position: relative;
    top: 10px;
    color: var(${'--ant-primary-color'}) !important;
  }
`;

/**
 * 全局加载组件
 */
function GlobalSpin() {
  const loading = useUiStore((s) => s.loading);

  return (
    <CommonSpin
      percent={loading.percent}
      spinning={loading.status != null ? loading.status : false}
      tip={loading.message}
      fullscreen
      size="large"
    />
  );
}

export default memo(GlobalSpin);
